.inline-photo {
  border: 1em solid #fff;
  border-bottom: 4em solid #fff;
  border-radius: .25em;
  box-shadow: 1em 1em 2em .25em rgba(0,0,0,.2);
  margin: 2em auto;
  opacity: 0;
  transform: translateY(4em) rotateZ(-5deg);
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
  opacity .3s .25s ease-out;
  max-width: 600px;
  width: 90%;
  will-change: transform, opacity;
}

.inline-photo.is-visible {
  opacity: 1;
  transform: rotateZ(-2deg);
}
header {
  opacity: 0;
  -webkit-transition: opacity .5s .25s ease-out;
  transition: opacity .5s .25s ease-out;
}

header.is-visible {
  opacity: 1;
}

.main-photo {
  -webkit-transform: scale(.8);
  transform: scale(.8);
}

.heading {
  -webkit-transform: translate(-50%, calc(-50% + 1em));
  transform: translate(-50%, calc(-50% + 1em));
}

.is-visible .main-photo {
  -webkit-transform: none;
  transform: none;
}

.is-visible .heading {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.main-photo, .heading {
  -webkit-transition: -webkit-transform 4s .25s cubic-bezier(0, 1, .3, 1);
  transition: -webkit-transform 4s .25s cubic-bezier(0, 1, .3, 1);
  transition: transform 4s .25s cubic-bezier(0, 1, .3, 1);
  transition: transform 4s .25s cubic-bezier(0, 1, .3, 1), -webkit-transform 4s .25s cubic-bezier(0, 1, .3, 1);

  will-change: transform;
}
